<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        .icon-css-view {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 7px;
            right: 0px;
            text-align: center;
        }
        .icon-css-view-code {
            position: absolute;
            width: 80px;
            height: 40px;
            top: 7px;
            right: 0px;
            text-align: center;
        }
    </style>
</head>
<body>
<form id="form1" class="layui-form layui-form-pane">
    <div th:if="${res=='1'}">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label" style="width: 150px">原密码：</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="oldPass" lay-verify="oldPass" placeholder="请输入旧密码" autocomplete="off" class="layui-input">
                <div class="icon-css-view">
                    <i id="iconShowView" class="layui-icon layui-icon-face-smile"
                       style="color: lawngreen;"></i>
                    <i id="iconHiddenView" class="layui-icon layui-icon-face-cry"
                       style="color: orangered;" hidden></i>
                </div>
            </div>
            <!--<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>-->
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label" style="width: 150px">输入新密码：</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="pass" lay-verify="pass|passVSold" placeholder="请填写6到12位密码" autocomplete="off" class="layui-input">
                <div class="icon-css-view">
                    <i id="iconShowView1" class="layui-icon layui-icon-face-smile"
                       style="color: lawngreen;"></i>
                    <i id="iconHiddenView1" class="layui-icon layui-icon-face-cry"
                       style="color: orangered;" hidden></i>
                </div>
            </div>
            <!--<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>-->
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label" style="width: 150px">确认新密码：</label>
            <div class="layui-input-inline">
                <input type="password" name="password"lay-verify="okPass" id="okPass" placeholder="确认新密码" autocomplete="off" class="layui-input">
                <div class="icon-css-view">
                    <i id="iconShowView2" class="layui-icon layui-icon-face-smile"
                       style="color: lawngreen;"></i>
                    <i id="iconHiddenView2" class="layui-icon layui-icon-face-cry"
                       style="color: orangered;" hidden></i>
                </div>
            </div>
            <!--<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>-->
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="updatePass">确认</button>
            </div>
        </div>
    </div>
    <div th:if="${res=='2'}">
        <div th:if="${user.getUserIphone()!=null && user.getUserIphone()!=''}">
            <div style="width: 340px" align="center">
                <h3>请输入<font th:text="${#strings.substring(user.getUserIphone(),0,3)+'****'+#strings.substring(user.getUserIphone(),7)}"></font>隐藏的四位</h3>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label" style="width: 150px">输入隐藏四位：</label>
                <div class="layui-input-inline">
                    <input  lay-verify="oldIphone4" placeholder="输入隐藏四位" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div th:if="${user.getUserIphone()==null || user.getUserIphone()==''}">
            <div style="width: 340px" align="center">
                <h3>请及时绑定手机</h3>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label" style="width: 150px">输入手机号：</label>
            <div class="layui-input-inline">
                <input  lay-verify="iphone|iphoneVSold" id="iphone" name="iphone" placeholder="输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="updateIphone">确认</button>
            </div>
        </div>
    </div>
    <div th:if="${res=='3'}">
        <div th:if="${user.getUserEmail()!=null && user.getUserEmail()!=''}">
            <div style="width: 340px" align="center">
                <h3>验证码将发送到<font th:text="${#strings.substring(user.getUserEmail(),0,2)+'****'}"></font>邮箱</h3>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label" style="width: 150px">填写验证码：</label>
                <div class="layui-input-inline">
                    <input  lay-verify="EmailCode"  id="code" name="code" placeholder="填写验证码" autocomplete="off" class="layui-input">
                    <div class="icon-css-view-code">
                        <a id="sendCode" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" style="border: 0;color: #0ab2d2">获取验证码</a>
                    </div>
                </div>
            </div>
        </div>
        <div th:if="${user.getUserEmail()==null || user.getUserEmail()==''}">
            <div style="width: 340px" align="center">
                <h3>请及时绑定邮箱</h3>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label" style="width: 150px">输入邮箱：</label>
            <div class="layui-input-inline">
                <input  lay-verify="email|emailVSold" id="email" name="email" placeholder="输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="updateEmail">确认</button>
            </div>
        </div>
    </div>
</form>
</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/jquery.base64.js}" type="text/javascript"></script>
<script th:inline="javascript">
    var index = parent.layer.getFrameIndex(window.name);
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer;
        // 是否显示密码
        var oldPass = $("#oldPass");
        $("#iconShowView").on('click', function(e){
            console.log("smile");
            oldPass[0].type = "text";
            $("#iconShowView")[0].hidden = true;
            $("#iconHiddenView")[0].hidden = false;
            form.render();
        });
        $("#iconHiddenView").on('click', function(e){
            console.log("cry");
            oldPass[0].type = "password";
            $("#iconShowView")[0].hidden = false;
            $("#iconHiddenView")[0].hidden = true;
            form.render();
        });
        var pass = $("#pass");
        $("#iconShowView1").on('click', function(e){
            console.log("smile");
            pass[0].type = "text";
            $("#iconShowView1")[0].hidden = true;
            $("#iconHiddenView1")[0].hidden = false;
            form.render();
        });
        $("#iconHiddenView1").on('click', function(e){
            console.log("cry");
            pass[0].type = "password";
            $("#iconShowView1")[0].hidden = false;
            $("#iconHiddenView1")[0].hidden = true;
            form.render();
        });
        var okPass = $("#okPass");
        $("#iconShowView2").on('click', function(e){
            console.log("smile");
            okPass[0].type = "text";
            $("#iconShowView2")[0].hidden = true;
            $("#iconHiddenView2")[0].hidden = false;
            form.render();
        });
        $("#iconHiddenView2").on('click', function(e){
            console.log("cry");
            okPass[0].type = "password";
            $("#iconShowView2")[0].hidden = false;
            $("#iconHiddenView2")[0].hidden = true;
            form.render();
        });
        //自定义验证规则
        form.verify({
            oldPass: function(value){
                if(passChenk()!=1){
                    return '密码有误！';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,passVSold:function (value) {
                if($("#oldPass").val()==value){
                    return '与原密码相同';
                }
            }
            ,okPass: function(value){
                if (value!=$("#pass").val()){
                    return '与输入的新密码不一致';
                }
            },oldIphone4: function (value) {
                if (value!=[[${#strings.substring(user.getUserIphone(),3,7)}]]){
                    return '隐藏位不匹配';
                }
            }
            ,iphone:[
                /^1[3578]\d{9}$/
                ,'手机号格式有误'
            ]
            ,iphoneVSold: function (value){
                if (value == [[${user.getUserIphone()}]]){
                    return '与原绑定号码相同';
                }
            }
            ,email:[
                /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                ,'邮箱格式有误'
            ]
            ,emailVSold: function (value){
                if (value == [[${user.getUserEmail()}]]) {
                    return '与原邮箱相同';
                }
            }
            ,EmailCode: function (value) {
                if (value ==""){
                    return '验证码不能为空';
                }
            }
        });
        //监听提交
        form.on('submit(updatePass)', function(data){
            var okPass = $("#okPass").val();
            var username=[[${user.getUserName()}]];
            $.ajax({
                type:'post',
                url:'/loginCenter/forget',
                data:{"username":username,"password":$.base64.encode(okPass)},
                dataType: "text",
                async: false,
                success:function (data) {
                    var res=Array;
                    if (data==1){
                        res[0]='修改成功';
                        res[1]='1'
                    //    layer.msg('修改成功', {icon: 1});
                    }else {
                        res[0]='修改失败';
                        res[1]='2'
                    //    layer.msg('修改失败', {icon: 2});
                    }

                    /*window.parent.location.reload();//刷新父页面*/
                    parent.layer.msg(res[0], {icon: res[1]});
                    parent.layer.close(index);
                }
            });

            return false;
        });
        form.on('submit(updateIphone)', function(data){
            $.ajax({
                type:'post',
                url:'/user/updateUserInfoAll',
                data:{"res":'2',"value":$("#iphone").val()},
                dataType: "text",
                async: false,
                success:function (data) {
                    var res=Array;
                    if (data==1){
                        res[0]='修改成功';
                        res[1]='1'
                        //    layer.msg('修改成功', {icon: 1});
                    }else {
                        res[0]='修改失败';
                        res[1]='2'
                        //    layer.msg('修改失败', {icon: 2});
                    }

                    /*window.parent.location.reload();//刷新父页面*/
                    parent.layer.msg(res[0], {icon: res[1]});
                    parent.layer.close(index);
                }
            });

            return false;
        });
        form.on('submit(updateEmail)', function(data){
            var flage=false;
            var oldEmail=[[${user.getUserEmail()}]];
            if (oldEmail==null||oldEmail==''){
                flage=true;
            }else {
                $.ajax({
                    type:'post',
                    url:'/loginCenter/forgetCheck',
                    data:{"username":[[${user.getUserName()}]],"code":$("#code").val(),"email":oldEmail},
                    dataType: "text",
                    async: false,
                    success:function (data) {
                        if (data==-3){
                            layer.msg('验证码超时', {icon: 0});
                        }else if (data==-4){
                            layer.msg('验证码有误', {icon: 2});
                        }else {
                            flage=true;
                        }
                    }
                });
            }
            if (flage) {
                $.ajax({
                    type: 'post',
                    url: '/user/updateUserInfoAll',
                    data: {"res": '3'},
                    dataType: "text",
                    async: false,
                    success: function (data) {
                        var res = Array;
                        if (data == 1) {
                            res[0] = '修改成功';
                            res[1] = '1'
                            //    layer.msg('修改成功', {icon: 1});
                        } else {
                            res[0] = '修改失败';
                            res[1] = '2'
                            //    layer.msg('修改失败', {icon: 2});
                        }

                        /*window.parent.location.reload();//刷新父页面*/
                        parent.layer.msg(res[0], {icon: res[1]});
                        parent.layer.close(index);
                    }
                });
            }
            return false;
        });
    });
    function passChenk() {
        var oldPass=$("#oldPass").val();
        var username=[[${user.getUserName()}]];
        var res="";
        $.ajax({
            type:'post',
            url:'/user/oldPassCheck',
            data:{"username":username,"password":$.base64.encode(oldPass)},
            dataType: "text",
            async: false,
            success:function (data) {
              res=data;
            }
        });
        return res;
    }
    $("#sendCode").click(function () {
        downTime();
        layer.msg('验证码已发送', {icon:1});
        $.ajax({
            type:'post',
            url:'/loginCenter/send',
            data:{"email":[[${user.getUserEmail()}]],"title":'改绑邮箱验证码'},
            dataType: "text",
            async: true,
            success:function (data) {
                if (data!=1){
                    layer.msg('请不要连续点击', {icon:2});
                }
            }
        });
    });
    var i=60;//倒计时
    function downTime() {
        $("#sendCode").empty().append(i+'S');
        i=i-1;
        if(i < 0){
            $("#sendCode").empty().append('获取验证码');
        }
        setTimeout(function(){
            downTime()
        },1000);
    }
</script>
</html>